<template>
  <div class="health-container">
    <!-- 导航栏 -->
    <header>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <div class="container">
        <nav>
          <div class="logo">
            <a href="/">安心<span>陪诊</span></a>
          </div>
          <ul class="nav-links">
            <li><a href="/">首页</a></li>
            <li><a href="#" @click.prevent>服务项目</a></li>
            <li><a href="#" @click.prevent="goToServiceProcess">服务流程</a></li>
            <li><a href="#" @click.prevent="goToNotice">公告中心</a></li>
            <li
                @mouseenter="showDropdown('about')"
                @mouseleave="hideDropdown()"
                @click.stop="toggleDropdown('about')"
            >
              <a href="#" @click.prevent>
                关于我们
                <el-icon><ArrowDown /></el-icon>
              </a>
              <ul
                  class="dropdown-menu"
                  v-if="activeDropdown === 'about'"
                  @mouseenter="cancelHide()"
                  @mouseleave="hideDropdown()"
              >
                <li v-for="item in dropdownOptions.about" :key="item.name">
                  <a href="#" @click="router.push(item.path)">{{ item.name }}</a>
                </li>
              </ul>
            </li>
          </ul>
          <div class="nav-buttons">
            <button @click="goToLogin" class="btn">登录</button>
            <button @click="goToRegister" class="btn">注册</button>
          </div>
        </nav>
      </div>
    </header>

    <!-- 隐私政策内容 -->
    <section class="terms-section">
      <div class="container">
        <div class="terms-container">
          <h1>隐私政策</h1>
          <p class="update-date">最后更新日期：2025年5月1日</p>

          <div class="terms-content">
            <p>安心陪诊平台（以下简称"我们"或"本平台"）非常重视用户的隐私保护。本隐私政策旨在说明我们如何收集、使用、存储、共享和保护您的个人信息。请您在使用我们的服务前仔细阅读本政策。</p>

            <h2>1. 我们收集的信息</h2>
            <p>1.1 <strong>注册信息</strong>：当您注册账户时，我们会收集您的姓名、手机号码、电子邮箱等基本信息。</p>
            <p>1.2 <strong>健康信息</strong>：为提供更好的陪诊服务，我们可能会收集您的部分健康信息，如就诊科室、病历摘要等。</p>
            <p>1.3 <strong>服务信息</strong>：包括您的服务预约记录、支付信息、服务评价等。</p>
            <p>1.4 <strong>设备信息</strong>：我们可能会收集您设备的型号、操作系统版本、唯一设备标识符等信息。</p>
            <p>1.5 <strong>日志信息</strong>：当您使用我们的服务时，系统会自动记录一些信息，包括IP地址、访问时间、浏览记录等。</p>

            <h2>2. 信息的使用</h2>
            <p>2.1 为您提供、维护和改进我们的服务。</p>
            <p>2.2 验证您的身份，防止欺诈和确保账户安全。</p>
            <p>2.3 为您提供个性化的服务推荐和内容展示。</p>
            <p>2.4 与您沟通，包括服务通知、政策变更提醒等。</p>
            <p>2.5 用于数据分析、研究和服务优化。</p>

            <h2>3. 信息的共享与披露</h2>
            <p>3.1 我们不会向第三方出售您的个人信息。</p>
            <p>3.2 在获得您明确同意的情况下，我们可能会与特定的第三方共享必要信息。</p>
            <p>3.3 为提供陪诊服务，我们会向陪诊师共享必要的服务信息，但会限制其使用范围。</p>
            <p>3.4 根据法律法规要求或政府部门的合法要求，我们可能会披露您的信息。</p>
            <p>3.5 在公司合并、收购或资产转让等情况下，我们可能会转移您的个人信息。</p>

            <h2>4. 信息的保护</h2>
            <p>4.1 我们采用行业标准的安全措施保护您的信息，包括加密技术、访问控制等。</p>
            <p>4.2 我们仅允许有必要知晓的员工访问您的信息，并要求他们履行保密义务。</p>
            <p>4.3 尽管有前述安全措施，请注意互联网传输并非100%安全，我们无法保证信息的绝对安全。</p>

            <h2>5. 您的权利</h2>
            <p>5.1 <strong>访问权</strong>：您可以随时访问和查看您的个人信息。</p>
            <p>5.2 <strong>更正权</strong>：您可以更新或更正不准确的个人信息。</p>
            <p>5.3 <strong>删除权</strong>：在特定情况下，您可以要求删除您的个人信息。</p>
            <p>5.4 <strong>撤回同意</strong>：您可以随时撤回之前给予的同意。</p>
            <p>5.5 <strong>注销账户</strong>：您可以申请注销账户，我们将按照法律规定处理您的信息。</p>

            <h2>6. Cookie和类似技术</h2>
            <p>6.1 我们使用Cookie和类似技术来提升用户体验、分析服务使用情况。</p>
            <p>6.2 您可以通过浏览器设置拒绝或管理Cookie，但这可能会影响部分功能的使用。</p>

            <h2>7. 未成年人保护</h2>
            <p>7.1 我们的服务主要面向成年人，未成年人使用我们的服务应在监护人指导下进行。</p>
            <p>7.2 如果我们发现无意中收集了未成年人的信息，将尽快删除相关数据。</p>

            <h2>8. 政策的变更</h2>
            <p>8.1 我们可能会不时更新本隐私政策，更新后的政策将在平台公示后生效。</p>
            <p>8.2 重大变更时，我们会通过显著方式通知您。</p>

            <h2>9. 联系我们</h2>
            <p>如果您对本隐私政策有任何疑问或需要行使您的权利，请通过以下方式联系我们：</p>
            <p>电子邮箱：privacy@anxinpeizhen.com</p>
            <p>电话：400-123-4567（转隐私保护部门）</p>

            <div class="acceptance">
              <p>使用本平台服务即表示您已阅读并同意本隐私政策的所有内容。</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer>
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h3>关于我们</h3>
            <p>安心陪诊致力于为需要就医陪伴的用户提供专业、贴心的陪诊服务。</p>
          </div>
          <div class="footer-section">
            <h3>快速链接</h3>
            <ul>
              <li><a href="/">首页</a></li>
              <li><a href="/about">关于我们</a></li>
              <li><a href="/contact">联系我们</a></li>
              <li><a href="/userAgreement">用户协议</a></li>
              <li><a href="/privacypolicy">隐私政策</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h3>联系我们</h3>
            <p>电话：400-123-4567</p>
            <p>邮箱：service@anxinpeizhen.com</p>
          </div>
        </div>
        <div class="copyright">
          <p>&copy; 2025 安心陪诊平台 版权所有</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {ref} from "vue";

const router = useRouter();
const activeDropdown = ref(null);
const hoverTimeout = ref(null);

const dropdownOptions = {
  'escort': [
    { name: '陪诊师列表', path: '/escort/list' },
    { name: '陪诊师认证', path: '/escort/certification' }
  ],
  'about': [
    { name: '项目简介', path: '/about' },
    { name: '联系我们', path: '/contact' }
  ]
};

const showDropdown = (menu) => {
  clearTimeout(hoverTimeout.value);
  activeDropdown.value = menu;
};

const hideDropdown = () => {
  hoverTimeout.value = setTimeout(() => {
    activeDropdown.value = null;
  }, 200);
};

const cancelHide = () => {
  clearTimeout(hoverTimeout.value);
};

const toggleDropdown = (menu) => {
  activeDropdown.value = activeDropdown.value === menu ? null : menu;
};

const goToRegister = () => {
  router.push('/register')
};

const goToLogin = () => {
  router.push('/login')
};

const goToNotice = () => {
  router.push('/notice')
};

const goToServiceProcess = () => {
  router.push('/serviceProcess')
}
</script>

<style scoped>
/* 样式与用户协议页面保持一致，无需修改 */
.dropdown-arrow svg {
  width: 1em;
  height: 1em;
}

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}

body {
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4a90e2;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  border: none;
  font-size: 16px;
}

.btn:hover {
  background-color: #3a7bc8;
}

.btn-secondary {
  background-color: #6c757d;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

/* 导航栏 */
header {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #4a90e2;
}

.logo span {
  color: #333;
}

.nav-links {
  display: flex;
  gap: 30px;
}

.nav-links a {
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #4a90e2;
}

.nav-buttons {
  display: flex;
  gap: 15px;
}

/* 隐私政策部分 */
.terms-section {
  padding: 60px 0;
  background-color: white;
}

.terms-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px;
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.terms-container h1 {
  font-size: 32px;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 10px;
}

.update-date {
  text-align: center;
  color: #777;
  margin-bottom: 40px;
}

.terms-content h2 {
  font-size: 20px;
  color: #2c3e50;
  margin: 30px 0 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.terms-content p {
  margin-bottom: 15px;
  line-height: 1.8;
  color: #555;
}

.acceptance {
  margin-top: 40px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
}

/* 页脚 */
footer {
  background-color: #2c3e50;
  color: #fff;
  padding: 60px 0 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-section h3 {
  font-size: 18px;
  margin-bottom: 20px;
  color: #fff;
}

.footer-section p {
  margin-bottom: 15px;
  color: #bbb;
}

.footer-section ul li {
  margin-bottom: 10px;
}

.footer-section a {
  color: #bbb;
  transition: color 0.3s;
}

.footer-section a:hover {
  color: #4a90e2;
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #3d5166;
  color: #bbb;
}

/* 下拉菜单样式 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 10px 0;
  z-index: 1000;
}

.dropdown-menu li {
  padding: 8px 20px;
  transition: background-color 0.3s;
}

.dropdown-menu li:hover {
  background-color: #f5f7fa;
}

.dropdown-menu a {
  display: block;
  color: #333;
  white-space: nowrap;
}

.dropdown-menu a:hover {
  color: #4a90e2;
}

.nav-links > li {
  position: relative;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .terms-container {
    padding: 20px;
  }

  .terms-container h1 {
    font-size: 26px;
  }

  .footer-content {
    grid-template-columns: 1fr;
  }
}
</style>